<template>
    <div class="detail-list">
        <div class="detail-list-item" v-for="(item,index) of list" :key="index">
            <h3 class="title">
                <span class="icon"></span>
                {{item.title}}
            </h3>
            <!--item.children的样式为padding 0.2rem， 所以递归组件的detail-list会递归padding  显示一种层级padding -->
            <div v-if="item.children" class="item-children">
                <detail-list :list="item.children"></detail-list>
            </div>
        </div>
    </div>
</template>

<script>
  export default {
    name: 'DetailList',
    props: {
      list: {
        type: Array,
        
      },
    },
 
  }
</script>

<style scoped lang="stylus">
    .detail-list {
        // 递归的子组件的 padding
        .item-children {
            padding: 0 0.2rem;
        }
        
        .title {
          
            margin-bottom: -.02rem;
            padding: 0 0.2rem;
            height: .88rem;
            background: #fff;
            color: #333;
            font-size: .32rem;
            line-height: .88rem;
            text-indent: .5rem;
            position: relative;
            .icon {
                display: inline-block;
                position: absolute;
                width: .36rem;
                height: .36rem;
                top: .26rem;
                left: .2rem;
                background: url(http://s.qunarzz.com/piao/image/touch/sight/detail.png) 0 -.45rem no-repeat;
                margin-right: .1rem;
                background-size: .4rem 3rem;
            }
            
        }
        
    }


</style>